import 'package:flutter/material.dart';
import 'package:sidebarx/sidebarx.dart';

import 'view/git/git-view.dart';
import 'view/project/peoject.dart';
import 'view/template/TemplateList.dart';

// enum AppLayoutPage { object, template, generate }

// class AppLayout extends StatelessWidget {
//   const AppLayout({super.key});

//   @override
//   Widget build(BuildContext context) {
//     return const BottomNavigationBarComponent();
//   }
// }

// class BottomNavigationBarComponent extends StatefulWidget {
//   const BottomNavigationBarComponent({super.key});

//   @override
//   State<BottomNavigationBarComponent> createState() =>
//       _BottomNavigationBarComponentState();
// }

// class _BottomNavigationBarComponentState
//     extends State<BottomNavigationBarComponent> {
//   Map<int, AppLayoutPage> pageMap = {
//     0: AppLayoutPage.object,
//     1: AppLayoutPage.template,
//     2: AppLayoutPage.generate,
//   };

//   int active = 0;

//   String title = 'home';

//   List<BottomNavigationBarItem> navigationBarItems = [
//     const BottomNavigationBarItem(icon: Icon(Icons.list_alt), label: '我的项目'),
//     const BottomNavigationBarItem(icon: Icon(Icons.message), label: '我的模板'),
//     const BottomNavigationBarItem(icon: Icon(Icons.add_chart), label: '快速生成')
//   ];

//   @override
//   Widget build(BuildContext context) {
//     return Column(
//       children: [
//         // 自动分配
//         Expanded(
//           child: renderContent(pageMap[active]),
//         ),
//         Center(
//           child: BottomNavigationBar(
//             currentIndex: active,
//             onTap: (index) {
//               setState(() {
//                 active = index;
//                 title = navigationBarItems[index].label!;
//               });
//             },
//             items: navigationBarItems,
//           ),
//         )
//       ],
//     );
//   }
// }

// List<Widget>? renderAction(AppLayoutPage? active) {
//   return [
//     IconButton(
//       icon: const Icon(Icons.cleaning_services_rounded),
//       onPressed: () {
//         print('clear');
//       },
//     ),
//     IconButton(
//       icon: const Icon(Icons.add),
//       onPressed: () {
//         print('add');
//       },
//     ),
//   ];
// }

// Widget renderContent(AppLayoutPage? active) {
//   Widget container = Container();
//   switch (active) {
//     case AppLayoutPage.object:
//       container = const ProjectView();
//       break;
//     case AppLayoutPage.template:
//       container = const TemplateList();
//       break;
//     case AppLayoutPage.generate:
//       container = const GitViewWidget();
//       break;
//     default:
//       container = Center(
//         child: Text('content$active'),
//       );
//   }
//   return container;
// }

class AppLayout extends StatelessWidget {
  AppLayout({Key? key}) : super(key: key);

  final _controller = SidebarXController(selectedIndex: 0, extended: true);
  final _key = GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'APP',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: primaryColor,
        // canvasColor: Color.fromRGBO(0, 0, 0, 0),
        scaffoldBackgroundColor: scaffoldBackgroundColor,
        textTheme: const TextTheme(
          headlineSmall: TextStyle(
            color: Colors.white,
            fontSize: 46,
            fontWeight: FontWeight.w800,
          ),
        ),
      ),
      home: Builder(
        builder: (context) {
          final isSmallScreen = MediaQuery.of(context).size.width < 600;
          return Scaffold(
            key: _key,
            appBar: isSmallScreen
                ? AppBar(
                    backgroundColor: canvasColor,
                    title: Text(_getTitleByIndex(_controller.selectedIndex)),
                    leading: IconButton(
                      onPressed: () {
                        // if (!Platform.isAndroid && !Platform.isIOS) {
                        //   _controller.setExtended(true);
                        // }
                        _key.currentState?.openDrawer();
                      },
                      icon: const Icon(Icons.menu),
                    ),
                  )
                : null,
            drawer: ExampleSidebarX(controller: _controller),
            body: Row(
              children: [
                if (!isSmallScreen) ExampleSidebarX(controller: _controller),
                Expanded(
                  child: Center(
                    child: _ScreensExample(
                      controller: _controller,
                    ),
                  ),
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}

class ExampleSidebarX extends StatelessWidget {
  const ExampleSidebarX({
    Key? key,
    required SidebarXController controller,
  })  : _controller = controller,
        super(key: key);

  final SidebarXController _controller;

  @override
  Widget build(BuildContext context) {
    return SidebarX(
      controller: _controller,
      theme: SidebarXTheme(
        margin: const EdgeInsets.only(left: 10, top: 10, bottom: 10),
        decoration: BoxDecoration(
          color: canvasColor,
          borderRadius: BorderRadius.circular(20),
        ),
        hoverColor: hoverColor,
        textStyle: TextStyle(color: Colors.white.withOpacity(1), fontSize: 18),
        selectedTextStyle: const TextStyle(color: Colors.white, fontSize: 18),
        hoverTextStyle: const TextStyle(color: Colors.white, fontSize: 18),
        itemTextPadding: const EdgeInsets.only(left: 30),
        selectedItemTextPadding: const EdgeInsets.only(left: 30),
        itemDecoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          border: Border.all(color: canvasColor),
        ),
        selectedItemDecoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          border: Border.all(
            color: actionColor,
          ),
          gradient: const LinearGradient(
            colors: [accentCanvasColor, canvasColor],
          ),
          // boxShadow: [
          //   BoxShadow(
          //     color: Colors.black.withOpacity(0.28),
          //     blurRadius: 30,
          //   )
          // ],
        ),
        iconTheme: IconThemeData(
          color: Colors.white.withOpacity(0.7),
          size: 20,
        ),
        selectedIconTheme: const IconThemeData(
          color: Colors.white,
          size: 20,
        ),
      ),
      extendedTheme: const SidebarXTheme(
        width: 200,
        decoration: BoxDecoration(
          color: canvasColor,
        ),
      ),
      footerDivider: divider,
      headerBuilder: (context, extended) {
        Widget header = const Text(
          '日报生成器',
          style: TextStyle(
            color: white,
            fontSize: 18,
            fontWeight: FontWeight.bold,
            overflow: TextOverflow.ellipsis,
          ),
        );
        if (!extended) {
          header = const SizedBox(
              child: Icon(
            Icons.recycling_sharp,
            color: white,
          ));
        }
        return SizedBox(
          height: 100,
          child: Padding(
            padding: EdgeInsets.all(16.0),
            child: header,
          ),
        );
      },
      items: [
        SidebarXItem(
          icon: Icons.add_chart_sharp,
          label: '快速日报',
          onTap: () {
            debugPrint('快速生成');
          },
        ),
        SidebarXItem(
          icon: Icons.propane_tank_rounded,
          label: '我的项目',
          onTap: () {
            debugPrint('我的项目');
          },
        ),
        const SidebarXItem(
          icon: Icons.type_specimen_outlined,
          label: '我的模板',
        ),
        // const SidebarXItem(
        //   icon: Icons.people,
        //   label: 'People',
        // ),
        // SidebarXItem(
        //   icon: Icons.favorite,
        //   label: 'Favorites',
        //   selectable: false,
        //   onTap: () => _showDisabledAlert(context),
        // ),
        // const SidebarXItem(
        //   iconWidget: FlutterLogo(size: 20),
        //   label: 'Flutter',
        // ),
      ],
    );
  }

  void _showDisabledAlert(BuildContext context) {
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(
        content: Text(
          'Item disabled for selecting',
          style: TextStyle(color: Colors.black),
        ),
        backgroundColor: Colors.white,
      ),
    );
  }
}

class _ScreensExample extends StatelessWidget {
  const _ScreensExample({
    Key? key,
    required this.controller,
  }) : super(key: key);

  final SidebarXController controller;

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    return AnimatedBuilder(
      animation: controller,
      builder: (context, child) {
        final pageTitle = _getTitleByIndex(controller.selectedIndex);
        switch (controller.selectedIndex) {
          case 0:
            return const GitViewWidget();
          case 1:
            return const ProjectView();
          //   return ListView.builder(
          //     padding: const EdgeInsets.only(top: 10),
          //     itemBuilder: (context, index) => Container(
          //       height: 100,
          //       width: double.infinity,
          //       margin: const EdgeInsets.only(bottom: 10, right: 10, left: 10),
          //       decoration: BoxDecoration(
          //         borderRadius: BorderRadius.circular(20),
          //         color: Theme.of(context).canvasColor,
          //         boxShadow: const [BoxShadow()],
          //       ),
          //     ),
          //   );
          case 2:
            return const TemplateList();
          default:
            return Text(
              pageTitle,
              style: theme.textTheme.headlineSmall,
            );
        }
      },
    );
  }
}

String _getTitleByIndex(int index) {
  switch (index) {
    case 0:
      return 'Home';
    case 1:
      return 'Search';
    case 2:
      return 'People';
    case 3:
      return 'Favorites';
    case 4:
      return 'Custom iconWidget';
    case 5:
      return 'Profile';
    case 6:
      return 'Settings';
    default:
      return 'Not found page';
  }
}

// 95,107,158
const primaryColor = Color.fromRGBO(95, 107, 158, 1);
const hoverColor = Color.fromRGBO(74, 89, 146, 1);
const canvasColor = Color.fromRGBO(95, 107, 158, 1);
const scaffoldBackgroundColor = Color.fromRGBO(241, 244, 255, 1);
const accentCanvasColor = Color(0xFF3E3E61);
const white = Colors.white;
const actionColor = Color.fromRGBO(74, 89, 146, 1);
final divider = Divider(color: white.withOpacity(0.3), height: 1);
